<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>专家详情</title>
	<meta name="viewport" content="width=device-width, initial-scale=1  maximum-scale=1 user-scalable=no">
	<meta name="mobile-web-app-capable" content="专家详情">
	<meta name="apple-mobile-web-app-capable" content="专家详情">
	<meta name="apple-touch-fullscreen" content="专家详情">
	<meta name="HandheldFriendly" content="专家详情">

	<link rel="stylesheet" href="${request.contextPath}/statics/css/materialize.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/normalize.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.carousel.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.theme.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.transitions.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/fakeLoader.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/style.css">
	<style>
		.person{
			width: 100%;
			height: 100px;
			border-radius: 10px;
			background-color: #ffffff;
			padding: 15px 12px 15px 12px;
		}
		.header{
			width: 48px; float: left
		}
		.per-detail{
			width: calc(100% - 60px);
			margin: 0 0 0 12px;
			float: left
		}
		.per-name{
			font-size: 16px;
			font-weight: bold;
			color: #000000;
		}
		.per-desc{
			margin-left: 25px;
			font-size: 12px;
			color: #263238;
		}
		.per-intro{
			color: #666666;
			font-size: 12px;
			overflow: hidden;
			text-overflow: ellipsis;
			display:-webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			margin-right: 16px;
			height: 44px;
			margin-top: 7px;
		}

	</style>
</head>
<body style="background: #EFF4F6;">
	<!-- about us -->
	<div id="rrapp" style="margin-top: 14px;">
		<div class="container" style="margin-top: 10px; width: calc(100% - 20px); ">
			<div class="person">
				<!--头像-->
				<div class="header">
					<img :src="expert.img" style="width:48px; height:48px; border-radius: 50%">
				</div>
				<div class="per-detail">
					<div style="display: flex; align-items: center;">
						<span class="per-name">{{expert.title}}</span>
						<span class="per-desc">{{expert.remark}}</span>
					</div>
					<div class="per-intro" v-html="expert.subTitle">
					</div>
				</div>
			</div>
			<div class="about-us" style="margin-top: 10px; border-radius: 15px; background-color: #ffffff; padding: 10px; min-height: 500px;">
				<img src="${request.contextPath}/statics/img/zhuanye.png"  style="width: 64px; height: 18px; float: left; margin: 10px 5px 0px 0px;">
				<p style="font-size: 14px; line-height: 30px;" v-html="expert.content"></p>
			</div>
		</div>
	</div>
	<!-- end about us -->
	

	<!-- loader -->
	<div id="fakeLoader"></div>
	<!-- end loader -->
	
	<!-- scripts -->
	<script src="${request.contextPath}/statics/js/jquery.min.js"></script>
	<script src="${request.contextPath}/statics/js/materialize.min.js"></script>
	<script src="${request.contextPath}/statics/js/owl.carousel.min.js"></script>
	<script src="${request.contextPath}/statics/js/fakeLoader.min.js"></script>
	<script src="${request.contextPath}/statics/js/contact-form.js"></script>
	<script src="${request.contextPath}/statics/js/main.js"></script><script src="../statics/js/vue.min.js"></script>

	<script>


		var vm = new Vue({
			el: '#rrapp',
			data: {
				id: "",
				expert:{},
			},
			created:function(){

				var url = location.search; //获取url中"?"符后的字串
				var tRequest = new Object();
				if (url.indexOf("?") != -1) {   //判断 URL 中是否包含查询字符串
					var str = url.substr(1);   //如果 URL 中包含查询字符串，截取查询字符串，去掉前面的“?”号。
					strs = str.split("&");    //将查询字符串按“&”号分割成一个个参数对。
					for(var i = 0; i < strs.length; i ++) {    //循环遍历所有的参数对。
						tRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);    //对每一个参数对进行处理，将参数名和参数值存储到 tRequest 对象中。
					}
				}
				this.id = tRequest.id

				this.queryExpertInfo();
			},
			methods:{
				queryExpertInfo(){
					$.ajax({
						type: 'GET',
						url: '${request.contextPath}/h5/queryExpertInfo/' + this.id,
						data: {},
						success: function (res) {
							console.log(res);
							if(res.code === 0){
								vm.expert = res.data;
								console.log(vm.expert.img)
							}else{
								alert(res.msg);
							}
						}
					})
				},
			},
		});
	</script>

</body>
</html>
